Claude Codeで他社調査→施策提案→プロトタイプ10本を自動化

public.icon

---

Claude Codeのカスタムスキルを使い、プロダクト開発における他社調査、施策アイデア言語化、UIプロトタイプ作成の一連のワークフローを自動化。テーマを入力するだけで10本のプロトタイプと調査レポートが数十分で生成され、優先度付き施策リストとして可視化される。速度に価値があり、検討の初速を大幅に向上させる。

Next Actions:

🤔 この記事をブックマークしたのは、自分のプロダクト開発でも同様の自動化を導入したいからですか？それとも、AI支援開発の最新動向を追跡する目的ですか？具体的にどの工程（調査/提案/実装）に最も時間がかかっていて自動化したいと感じていますか？

---

📰 Claude Codeで「他社調査 → 施策提案 → プロトタイプ10本」を自動化した

こちらの @takejune さんの記事を読んで、自分でもClaude Codeでのプロトタイプ自動生成を試してみました。

takejuneさんのアプローチは「人間がアイデアを持っていて、それをAIで大量にプロト化する」というものです。

今回はプロトタイプ生成だけでなく、その手前にある他社調査や施策提案を含めて、一気通貫で自動化できないかを試してみました。

今回試したこと

プロダクト開発で施策を検討するとき、だいたいこんな作業をしています。

- 目的・目標に関連する他社事例のリサーチ

- 施策アイデアの言語化

- UIプロトタイプの作成

- チーム内での共有・フィードバック

Claude Codeにテーマを渡すだけで1〜3が全部動き、効果的な成果が得られるのか。今回のワークフローではそれを試してみました。

ワークフローの全体像

Claude Code の「カスタムスキル」にフロー全体を定義し、

/prototype-sprint {テーマ名}

の一言で以下のステップを自動実行できるようにしました。

- Step 1: コンテキスト収集（戦略資料＋デザインガイドライン読み込み）

- Step 2: テーマに関連する他社事例を調査（WebSearchで10事例）

- Step 3: 施策案の作成（10件）

- Step 4: プロトタイプ作成（エージェント並列実行で10本）

- Step 5: プロトタイプの一覧ページの作成

- Step 6: 他社調査レポートページの作成

Step 1〜3が「何を作るかを決める」工程、Step 4〜6が「作る」工程です。

その後に、人間である自分が生成されたページを確認し、以下のStep7〜8を行います。

- Step 7: ブラウザで確認

- Step 8: MasterにマージしてGitHub Pagesへパスワード認証付きページとしてデプロイ

実行結果

自社アプリのある機能改善をテーマに実行したところ、以下のようなプロトタイプ（10本）の一覧と他社調査のレポートが生成されました。

これらのプロトタイプの施策案はClaude Codeが他社調査の結果と自社の戦略資料を突き合わせて提案したものです。人間が事前に機能やUIを指示したわけではありません。

これらが１つのURLからブラウザ確認できるため、Slackでの共有もしやすいです。

生成された施策の所感

正直なところ、提案された施策の大半は予想の範囲内で、「まあ、そうだよね」という内容が並びます。

ただ、各施策には「期待」と「実装容易性」の2軸5段階評価が加えられ、並べてみると「効果は高いが後回しにしていた施策」や「実装が簡単なのに手をつけていなかった施策」が可視化されます。確実にやったほうがいい施策が、優先度付きで整理された状態で出てくるのは便利です。

プロトタイプの細部を見ていくと発見が色々とありました。具体的な画面に落とし込まれると、「この導線ならボタンの位置はここか」「この文脈ならモーダルよりインラインのほうが自然だな」といった気づきが生まれます。テキストで施策を読むだけでは出てこない視点です。

施策のアイデア自体に驚きを期待するよりも、「数十分でここまで揃う」という速度に価値があると感じています。ゼロから調査して、施策を言語化して、プロトタイプまで作るとなると通常は数日かかります。それが数十分で10パターン並んだ状態で出てくる。検討の初速としてはかなり良さそうです。

どう作ったか

ここからは、ワークフローの各ステップで工夫した点や課題に感じた点を掘り下げます。

自社コンテキストの事前読み込み

はじめにやったのは、Claude Codeに「自社の文脈」を事前に渡すことでした。

スキル内で以下のように定義しておけば、各フォルダに格納した最新のドキュメントを毎回反映してくれます。

以下のファイルを読み込み、事業目標・KPI・スタイルガイドを把握する。

デザインガイドラインについては、Web開発に利用可能なコード資産（デザイントークンやコンポーネント）が無かったため、Figma MCP経由でFigmaの既存ライブラリからスタイルガイドを生成してコンテキストに含めました。これだけでプロトタイプの見た目がブランドから大きく乖離しなくなります。

他社調査の深度と限界

他社事例の調査では、Claude CodeのWebSearch機能を使ってテーマに関連する事例を調査します。調査結果はMarkdownファイルとして自動保存されます。

今回のテーマでは、関連する他社事例として10パターンが見つかりました。ただし、キーワードによるWeb検索では定番的な事例に偏りやすく、実際にサービスを操作して得られる気づきに比べるとどうしても浅くなります。

今後の課題として、例えばPlaywrightでベンチマーク対象のサービスを実際に操作させるなど、より深い内容の調査結果を得る方法を工夫の余地はありそうです。

出力フォーマットの統一

施策案のフォーマットはスキルの中で細かく指定しています。

- 一覧表（施策番号 / 施策名 / 導線タイプ / 想定改善根拠）

- 各施策の詳細（画面 / タイミング / UI / 期待効果）

- プロトタイプのファイル名一覧

毎回同じ形式で出力されるので、施策同士の比較がしやすくなります。

GitHub Pagesへの認証付きデプロイ

ローカルで確認が済んだプロトタイプは、mainブランチにマージするとGitHub Actions経由でGitHub Pagesに自動デプロイされるように設定しています。デプロイ時にHTMLファイルをStatiCryptで暗号化し、パスワード入力画面を挟む仕組みにしました。

SlackでURLを送るだけでプロトタイプの共有をしやすくしました。

まとめ

takejuneさんの記事に触発されて、「プロトタイプ生成の自動化はどこまで広げられるか」を試しました。

その結果、荒削りではあるものの「他社調査→施策提案→プロト生成」まで、テーマ入力だけで一気通貫で動くワークフローを数十分で構築できることが

是非試してみてください。

---

関連: